import { deepClone } from "../deep-clone";
import { reactive } from "vue";

interface Options {
  /**
   * 当前页
   */
  page?: number;
  /**
   * 每页条数
   */
  size?: number;
  /**
   * 请求方法
   * @param args 发送的数据
   * @returns 响应数据
   */
  fetchFun: (
    args: Record<string, any>
  ) => Promise<{ data: any; status: boolean }>;
  /**
   * 请求参数
   */
  params?: Record<string, any>;
  /**
   * 列表key
   */
  listKey?: string;
}

/**
 * 懒加载数据
 */
interface LazyData {
  /**
   * 当前页码
   */
  page: number;
  /**
   * 每页数量
   */
  size: number;
  /**
   * 总数量
   */
  count: number;
  /**
   * 数据列表
   */
  lists: Record<string, any>[];
  /**
   * 扩展数据
   */
  extend: Record<string, any>;
  /**
   * 是否正在加载中
   */
  loading: boolean;
  /**
   * 是否已经加载完毕
   */
  loadfished: boolean;
  /**
   * 是否为空
   */
  isEmpty: boolean;
}

/**
 * 懒加载钩子函数
 * @param options
 * @returns
 */
export function useLazyloading(opt: Options) {
  const { page = 1, size = 10, fetchFun, params = {}, listKey = "list" } = opt;

  /**
   * 数据
   */
  const pageData = reactive<LazyData>({
    page,
    size,
    count: 0,
    lists: [],
    extend: {},
    loading: false,
    loadfished: false,
    isEmpty: false,
  });

  /**
   * 获取列表
   */
  const getLists = async () => {
    pageData.loading = true;
    const res = await fetchFun({
      ...params,
      page: pageData.page,
      size: pageData.size,
      // 兼容部分接口分页
      page_no: pageData.page,
      page_size: pageData.size,
    });
    if (res.status) {
      // 服务器返回的可能就是个数组，转换一下，适应统一接口
      if (Array.isArray(res.data)) {
        const temp = deepClone(res.data);
        res.data = {
          list: temp,
          count: temp.length,
        };
      }

      pageData.extend = res.data.extend ?? {};
      pageData.count = res.data.count;

      if (res.data[listKey]) {
        if (pageData.page > 1) {
          if (res.data[listKey].length === 0) {
            pageData.loadfished = true;
          }
          pageData.lists = [...pageData.lists, ...res.data[listKey]];
          pageData.isEmpty = false;
        } else {
          pageData.lists = res.data[listKey];
          if (pageData.lists.length === 0) {
            pageData.isEmpty = true;
          } else {
            pageData.isEmpty = false;
          }
        }
      } else {
        pageData.loadfished = true;
      }
    }

    pageData.loading = false;
  };

  /**
   * 重置
   * @param get 是否立即获取数据
   */
  const reset = async (get: boolean = true) => {
    pageData.page = 1;
    pageData.lists = [];
    pageData.loadfished = false;
    pageData.isEmpty = false;

    // 重置之后立马获取数据
    if (get) {
      await getLists();
    }
  };

  /**
   * 获取下一页数据
   */
  const getNextPage = async () => {
    if (pageData.loadfished) {
      return;
    }
    pageData.page++;
    await getLists();
  };

  return {
    pageData,
    getLists,
    getNextPage,
    reset,
  };
}
